<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐盒</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .panel {
            width: 400px;
            border: 1px solid #666;
            border-radius: 4px;
            margin: 100px auto;
            background-color: pink;
        }
        .header {
            text-align: center;
            background-color: skyblue;
        }
        .content {
            margin-left: 10px;
        }
        .footer {
            text-align: center;
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="panel">
        <div class="header">
            <h2>千千音乐盒</h2>
            
        </div><hr>
        <div class="content">
            <input type="checkbox">说说<br>
            <input type="checkbox">凤凰花开的路口<br>
            <input type="checkbox">年少有为<br>
            <input type="checkbox">年轮<br>
            <input type="checkbox">爱的可能<br>
            <input type="checkbox">泡沫美人鱼<br>
            <input type="checkbox">小情书<br>
            <input type="checkbox">异想记<br>
            <input type="checkbox">现在我很幸福<br>
            <input type="checkbox">分手快乐<br>
        </div><hr>
        <div class="footer">
            <button id="allSelect">全选</button>
            <button id="cancelSelest">取消全选</button>
            <button id="reverseSelect">反选</button>
        </div>
    </div>
    <script>
        var inputs=document.getElementsByTagName('input');
        var allSelect=document.getElementById('allSelect');
        var cancelSelect=document.getElementById('cancelSelest');
        var reverseSelect=document.getElementById('reverseSelect');
        //全选
        allSelect.onclick=function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=true;
            }
        }
        //取消全选
        cancelSelect.onclick=function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=false;

            }
        }
        //反选
        reverseSelect.onclick=function(){
            for(var i=0;i<inputs.length;i++){
                // if(inputs[i].checked){
                //     inputs[i].checked=false;
                // }else{
                //     inputs[i].checked=true;
                // }
                inputs[i].checked=!inputs[i].checked;//第二种方法
            }
        }
    </script>
</body>
</html>